<template>
  <div id="app">
    <!-- <div :style="{height: navigatorHeight, width: '100%'}"></div> -->
    <router-view v-slot="{ Component, route }">
      <transition :name="route.meta.transition">
        <component
          class="cpt-animation"
          :style="{ zIndex: route.meta.index }"
          :is="Component"
        />
      </transition>
    </router-view>
  </div>
</template>

<script setup>
// import { ref } from 'vue'

// let navigatorHeight = ref(0)

window.htmlPlus(() => {
  window.plus.navigator.setStatusBarBackground("#FFFFFF")
  window.plus.navigator.setStatusBarStyle('dark');
  // if (window.plus.navigator.isImmersedStatusbar())
  // navigatorHeight.value = window.plus.navigator.getStatusbarHeight() + "px" || 3 + "rem"
})

// const router = useRouter()

// let SkipSwitchName = ref('')

// watch(
//   () => router.currentRoute.value.meta.index,
//   (newValue, oldValue) => {
//     console.log(newValue, oldValue)
//     if (newValue > oldValue) {
//       SkipSwitchName.value = 'Skright'
//     } else {
//       SkipSwitchName.value = 'Skleft'
//     }
//   },
//   { immediate: true }
// )
</script>

<style>
:root {
  /* 骨架的背景颜色 */
  --van-skeleton-row-background-color: #fff !important;
  /* 复选框的左边距 */
  /* --van-checkbox-label-margin: 1rem !important; */
  /* tab 栏选中下标颜色 */
  --van-tabs-bottom-bar-color:  var(--btn-background) !important;
  /* 按钮背景颜色 */
  --van-button-primary-background-color: var(--primary-color1) !important;
  /* 按钮边框颜色 */
  --van-button-primary-border-color: var(--primary-color1) !important;
  /* 按钮 b-r  */
  --van-button-round-border-radius: 0.8rem !important;
  /* 顶部导航栏文本颜色 */
  --van-nav-bar-text-color: var(--blue-color1) !important;
  /* 顶部导航栏图标颜色 */
  --van-nav-bar-icon-color: var(--blue-color1) !important;
}

/* .Skright-enter-active,
.Skright-leave-active,
.Skleft-enter-active,
.Sklef-leave-active {
  transition: all 500ms;
} */
.Skright-enter-from {
  transform: translate3d(-20%, 0, 0);
  opacity: 0;
}
/* .Skright-enter-to {
  transform: translate3d(100%, 0, 0);
  opacity: 1;
} */
/* .Skright-leave {
  transform: translate3d(0, 0, 0);
  opacity: 1;
} */
.Skright-leave-to {
  transform: translate3d(100%, 0, 0);
  opacity: 0;
}
/* 回退动画 */
.Skleft-enter-from {
  transform: translate3d(100%, 0, 0);
  opacity: 1;
}
.Skleft-leave-to {
  transform: translate3d(-20%, 0, 0);
  opacity: 0;
}
/* 平移动画 */
.Skcenter-enter-from {
  transform: translate3d(-100%, 0, 0);
  opacity: 1;
}
.Skcenter-leave-to {
  transform: translate3d(100%, 0, 0);
  opacity: 1;
}

.cpt-animation {
  position: absolute;
  width: 100%;
  overflow: hidden;
  transition: all 0.5s cubic-bezier(0.55, 0, 0.1, 1);
  /* transition: all 0.5s ease-in; */
}
#app {
  width: 100%;
  /* height: calc(100vh - v-bind(navigatorHeight)); */
  height: 100vh;
}
</style>
